<template>
  <div class="user_wapper">
    <el-row>
      <el-col :span="24">
        <el-card shadow="always">
          <el-row>
            <el-col :span="24">
              <el-input
                clearable
                @clear="onclear"
                placeholder="请输入角色查询的id"
                v-model="Query.query"
                class="input-with-select"
              >
                <el-button slot="append" icon="el-icon-search" @click="onserch"></el-button>
              </el-input>
            </el-col>
          </el-row>
          <div class="height"></div>
          <el-table :data="tableData" border="" style="width: 100%">
            <el-table-column prop="id" label="用户id" width="100"></el-table-column>
            <el-table-column prop="roleName" label="角色名称"></el-table-column>
            <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="row">
                <el-button type="primary" size="mini" @click="onedit(row)">修改</el-button>
                <el-button type="danger" @click="ondel(row)" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!--  -->
      <el-dialog
      title="角色修改"
      :visible="dialogRole"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
        <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="ruleForm.roleName" :disabled="isedit"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" >
          <el-input type="textarea"
  autosize v-model="ruleForm.roleDesc" ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogRole=false" v-no-click>取 消</el-button>
        <el-button type="primary" @click="onRoleconfirm" v-no-click>确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  created() {
    this.users();
  },
  mounted() {},
  data() {
    return {
      isedit:false,
      Query: {
        query: "",
        pagenum: 1,
        pagesize: 10,
        total: 0,
      },
      dialogRole:false,
      tableData: [],
      ruleForm:{
        roleName:"",
        roleDesc:"",
        id:""
      },
       rules: {
        roleName: [
          { required: true, message: "请输入角色名", trigger: "blur" }
        ],
       }
    };
  },
  // 方法
  methods: {
    users() {
      this.$http
        .userroles({
          params: this.Query
        })
        .then(res => {
          if (res.meta.status == 200) {
            console.log(res);

            this.tableData = res.data;
            // this.Query.total=res.data.total
          } else {
            this.$message.error(res.meta.msg);
          }
        })
        .catch(res => {
          console.log(res);

          this.$message.error("网络错误");
        });
    },
    onchange(row) {
      this.$http
        .usersState(row.row.id, row.row.mg_state, {})
        .then(res => {
          if (res.meta.status == 200) {
            this.$message.success(res.meta.msg);
            this.users();
          } else {
            this.$message.error(res.meta.msg);
          }
        })
        .catch(res => {
          console.log(res);

          this.$message.error("网络错误");
        });
    },
    // 点击了删除
    ondel(row) {
      this.$confirm("确定删除管理员吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .usersdelete(row.row.id, {})
            .then(res => {
              if (res.meta.status == 200) {
                this.$message.success(res.meta.msg);
                this.users();
              } else {
                this.$message.error(res.meta.msg);
              }
            })
            .catch(res => {
              console.log(res);

              this.$message.error("网络错误");
            });
        })
        .catch(() => {});
    },
    onclear() {
      this.users();
    },
    handleSizeChange(e) {
      this.Query.pagesize = e;
      this.users();
    },
    handleCurrentChange(e) {
      this.Query.pagenum = e;
      this.users();
    },
    onserch() {
      if (!this.Query.query) {
        this.$message.error("请输入查询内容");
        return;
      }

      this.$http
        .serchroles(this.Query.query, {})
        .then(res => {
          if (res.meta.status == 200) {
            this.tableData = [res.data];
          }
        })
        .catch(res => {
          console.log(res);

          this.$message.error("网络错误");
        });
    },
    onedit(row){
      console.log(row);
      
      this.ruleForm.id=row.row.id
        this.dialogRole=true
        this.$http
        .getserchUsers(this.ruleForm.id, {})
        .then(res => {
          if (res.meta.status == 200) {
                 console.log(res);
                 
          }
        })
        .catch(res => {
          console.log(res);

          this.$message.error("网络错误");
        });
    },
    onRoleconfirm(){
      
       this.$http
        .geteditusers(this.ruleForm.id, this.ruleForm)
        .then(res => {
          if (res.meta.status == 200) {
                 this.users();
          }
        })
        .catch(res => {
          console.log(res);

          this.$message.error("网络错误");
        });
    }
  },
  //计算属性
  computed: {},
  // 监听属性
  watch: {},
  // 组件注册
  components: {},
  // 组件销毁之前
  beforeDestroy() {}
};
</script>
<style lang="less" scoped>
.user_wapper {
  height: 100%;
  width: 100%;
  .input-with-select {
    width: 30%;
  }
}
</style>